<script setup lang="ts">
import { useDebounceFn } from '@vueuse/core'
import { ClassInfoApi } from '@/apis'
import CellClassInfo from '@/components/ProCell/CellClassInfo.vue'

const props = withDefaults(defineProps<Props>(), {
  placeholder: '班级ID/班级名称/老师关键词',
  // keyword: undefined,
})

const emit = defineEmits(['select'])

interface Props {
  placeholder?: string
  // keyword?: string
}

const model = defineModel<string | number | Array<any>>()
const options = ref<any>()
const loading = ref(false)
const getOptionList = (keyword = undefined) => {
  loading.value = true
  ClassInfoApi.getClassPage({
    keyword,
    page: 1,
    size: 20,
    total: 1
  }).then((res) => {
    options.value = res.records
    // options.value = res.records.map(item => ({
    //   label: item.name,
    //   value: item.id,
    // }))
  }).finally(() => {
    loading.value = false
  })
}

// watch(() => props.keyword, (_) => {
//   console.log('keyword: ', props.keyword)
//   getOptionList()
// }, { immediate: true })

const onSearch = useDebounceFn((value) => {
  getOptionList(value)
}, 100)

const onChange = (item) => {
  // console.log('change: ', item)
  // model.value = item.id
  emit('select', item)
}

onMounted(() => {
  getOptionList()
})
</script>

<template>
  <a-select
    v-model="model"
    :loading="loading"
    :placeholder="props.placeholder"
    allow-clear
    allow-search
    :filter-option="false"
    value-key="id"
    @search="onSearch"
    @change="onChange"
  >
    <a-option v-for="item in options" :key="item.id" class="py-6px!" :value="item.id">
      <CellClassInfo :id="item.id" :is-link="false" :name="item.name" :lead-teacher-name="item.leadTeacherName" :assist-teacher-name="item.assistTeacherName" />
    </a-option>
  </a-select>
</template>

<style scoped>
:deep(.arco-select-option-content) {
  width: 100%;
}
</style>
